<template>
  <div class="w-full h-full flex">
    <div class="flex-1 h-full flex flex-col p-5">
      <div  class="flex-1 h-0">
        <el-table v-loading="loading" height="100%" border ref="tablePostRef" @select-all="selectAllCallback"
                  @select="selectCallback" :data="postData">
          <el-table-column type="selection" width="55"/>
          <el-table-column label="职位名称" header-align="center" align="center" prop="postName">
          </el-table-column>
        </el-table>
      </div>
      <div >
        <BasePage @load="loadPost"  v-model:current="queryForm.current" v-model:size="queryForm.size"
                  :total="queryForm.total"/>
      </div>
    </div>
    <div class="w-96 flex flex-col border">
      <div class="h-12 pl-2.5 flex items-center border-b">
        <span>已选:</span>
      </div>
      <div class="flex-1 h-0">
        <el-scrollbar>
          <div v-for="(data,index) in selectedData" class="h-12 w-full flex items-center border-b pl-2.5 pr-2.5 ">
            <span class="flex-1">{{ data.name }}</span>
            <div class="w-12">
              <el-button link type="danger" @click="delSelected(index)">删除</el-button>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {nextTick, onMounted, PropType, reactive, ref, watch} from "vue";
import {FlowUserModel} from "/@/api/system/model/CommonModel";
import {PostModel} from "/@/api/system/model/PostModel";
import {listPostPage} from "/@/api/system/PostApi";
const props = defineProps({
  modelValue: Array as PropType<FlowUserModel[]>,
})
const emit = defineEmits(['update:modelValue'])
const postData = ref<PostModel[]>([])
const loading = ref(false)
const tablePostRef = ref()
const selectedData = ref<{
  value: string
  name: string
}[]>([])
const queryForm = reactive({
  total: 0,
  current: 1,
  size: 10
})
/**
 * 加载职位
 */
const loadPost = async () => {
  loading.value = true
  let res = await listPostPage(queryForm, () => {
    loading.value = false
  },false)
  postData.value = res.records
  queryForm.total = res.total
  nextTick(() => {
    tablePostRef.value.clearSelection()
    let postIds = selectedData.value.map(res => res.value);
    postData.value.forEach(res => {
      if (postIds.includes(res.postId)) {
        tablePostRef.value.toggleRowSelection(res, undefined)
      }
    })
  })
}
const delSelected = (index: number)=>{
  selectedData.value.splice(index, 1)
  setSelected()
}

const selectAllCallback = (selection) => {
  if (selection.length > 0) {
    selection.forEach(res => {
      let item = selectedData.value.find(r => r.value === res.postId)
      if (!item) {
        selectedData.value.push({name: res.postName, value: res.postId})
      }
    })
  } else {
    selectedData.value = []
  }
}
const selectCallback = (selection, row) => {
  //查找列表中是否有当前行，判断当前操作是否为选中
  let index = selection.findIndex(res => res.postId == row.postId)
  if (index != -1) {
    selectedData.value.push({name: row.postName, value: row.postId})
  } else {
    selectedData.value.splice(index,1)
  }
}

const setSelected = () => {
  tablePostRef.value.clearSelection()
  let postIds = selectedData.value.map(res => res!.value)
  postData.value.forEach(res => {
    if (postIds.includes(res.postId)) {
      tablePostRef.value.toggleRowSelection(res, undefined)
    }
  })
}
onMounted(()=>{
  loadPost()
})
watch(() => props.modelValue, (newValue: any) => {
  selectedData.value = newValue || []
}, {deep: true, immediate: true})
watch(() => selectedData.value, (newValue) => {
  emit('update:modelValue', newValue)
}, {deep: true})
</script>

<style scoped>

</style>